<template>
  <div class="demo-select-size">
    <div class="column-divider">
      <div class="demo-button-line">
        <div class="d-title">默认</div>
        <e-select
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">中型</div>
        <e-select
          size="middle"
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>

    <div class="column-divider">
      <div
        class="demo-button-line">
        <div class="d-title">可清除</div>
        <e-select
          clearable
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div
        class="demo-button-line">
        <div class="d-title">不可选</div>
        <e-select
          clearable
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div
        class="demo-button-line">
        <div class="d-title">无数据1</div>
        <e-select
          style="width:200px"
          not-found-text = "暂无数据，您可以xxxxxx" 
        >
          <e-option
            v-for="item in countryList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </e-option>
        </e-select>
      </div>
      <div
        class="demo-button-line">
        <div class="d-title">无数据2</div>
        <e-select
          style="width:200px"
        >
          <e-option
            v-for="item in countryList"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </e-option>
          <template #cutomeNoData>
            <div class="demo-cutome-no-data">
              <e-icon class="demo-cutome-no-data-icon" type="a-nodata"></e-icon>
              <span class="demo-cutome-no-data-span">暂无数据，您可以</span><span><a @click="createItem">立即创建</a></span>  
            </div>
          </template>
        </e-select>
      </div>
      <div
        class="demo-button-line">
        <div class="d-title">不可编辑</div>
        <e-select
          disabled
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris',
          disabled: true
        },
        {
          value: 'Canberra',
          label: 'Canberra',
          disabled: true
        }
      ],
      countryList: [

      ]
    }
  },
  methods: {
    createItem() {
      alert('暂不支持创建')
    }
  }
}
</script>
<style>
.demo-select-size .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  display: inline-block;
  width: 4rem;
  margin-bottom: 20px;
}
.demo-cutome-no-data {
  position: relative;
}
.demo-cutome-no-data-icon {
  position: absolute;
  left: -15px;
  top: 3px
}
.demo-cutome-no-data-span {
  color: #3e3f43;
}
</style>
